import React, { Component } from 'react';
import { Row, Col,Form, Input,message,Cascader,Button,Icon} from 'antd';
import axios from 'axios';
import qs from 'qs';
import RcUeditor from 'react-ueditor-wrap';
import { withRouter } from 'react-router'
import Upload from 'rc-upload';

const style = `
        .rc-upload-disabled {
           opacity:0.5;
        `;

const FormItem = Form.Item;
const formItemLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
};




class newsDetails extends Component {

        constructor(props) {
                super(props);
                console.log(props.record)

                //console.log(this.state)

                //this.state = ({
                //        destroyed: false,
                //});

        }

        state={
                imgUrl:"",
                list:[],
                content:""
        }

        componentDidMount() {
                this.getClassList()
                console.log(this.props.record)

                this.setState(
                    {
                            imgUrl: this.props.record.imgurl
                    }
                )
        }
        onSuccess=(file)=>{
                this.setState(
                    {
                            imgUrl: file.data.url
                    }
                )
                //console.log(this.state)
                //console.log(file)
        }
        hanldeChage = (value) => {
                //console.log('RcUeditor', value);
                this.setState(
                    {
                            content:value
                    }
                )
        }
        getClassList = () => {
                let that=this
                axios.post("/api/?s=Newsclass.getTree")
                    .then(function (response) {
                            let result=response.data.data
                            that.setState(
                                {
                                        list:result.items
                                }
                            )
                    })
                    .catch(function (error) {
                            console.log(error);
                    })
        }
        handleSubmit = (e) => {
                console.log(e);
                e.preventDefault();

                this.props.form.validateFields((err, values) => {
                        if (!err) {
                                console.log('Received values of form: ', values);
                                let sendJson={
                                        "title" :values.title,
                                        "orderNo":values.orderNo,
                                        "linkurl":values.linkurl,
                                        "imgurl":this.state.imgUrl,
                                        "summary":values.summary,
                                        "fatheridArr":values.fatheridArr.toString(),
                                        "fatherid":values.fatheridArr[values.fatheridArr.length-1],
                                        "content":this.state.content
                                }
                                if(this.props.record.actionType==="mod")
                                {
                                        sendJson.id=this.props.record.id
                                }

                                let sendString=qs.stringify(sendJson)
                                if(this.props.record.actionType==="add")
                                {
                                        this.insertRecord(sendString)
                                }
                                else
                                {
                                        this.updateRecord(sendString)
                                }
                        }
                });
        }
        insertRecord=(sendJson)=>{
                let that=this
                axios.post("/api/?s=News.insert",sendJson)
                    .then(function (response) {
                            let result=response.data
                            if(result.ret===200)
                            {
                               message.success("添加成功！")
                               that.props.history.push({pathname:"/home/news/list"})
                            }
                            else
                            {
                               message.error(result.msg)
                            }

                    })
                    .catch(function (error) {
                            console.log(error);
                    })
        }
        goList=()=>{
                this.props.history.push({pathname:"/home/news/list"})
        }
        updateRecord=(sendJson)=>{
                let that=this
                axios.post("/api/?s=News.update",sendJson)
                    .then(function (response) {
                            let result=response.data
                            if(result.ret===200)
                            {
                                    message.success("修改成功！")
                                    that.props.history.push({pathname:"/home/news/list"})
                            }
                            else
                            {
                                    message.error(result.msg)
                            }

                    })
                    .catch(function (error) {
                            console.log(error);
                    })
        }



        render() {


                const { getFieldDecorator } = this.props.form;

                return (
                    <div>
                                <h3>{this.props.record.actionType==="add"?"新增":"修改"} <span onClick={this.goList} style={{float:"right"}}>返回列表</span></h3>
                                    <Form onSubmit={this.handleSubmit}>
                                            <Row>
                                                    <Col span={12}>
                                            <FormItem {...formItemLayout} label="标题">
                                                    {getFieldDecorator('title', {
                                                            rules: [{
                                                                    required: true,
                                                                    message: '请输入标题',
                                                            }],
                                                    })(
                                                        <Input placeholder="请输入标题"/>
                                                    )}
                                            </FormItem>
                                                            </Col>
                                                    <Col span={12}>
                                            <FormItem
                                                {...formItemLayout}
                                                label="父级目录"
                                            >
                                                    {getFieldDecorator('fatheridArr', {
                                                            initialValue: [],
                                                            rules: [{ type: 'array', required: true, message: '请选择父级目录' }],
                                                    })(
                                                        <Cascader options={this.state.list} changeOnSelect placeholder="父级目录"/>
                                                    )}
                                            </FormItem>
                                                    </Col>
                                                    <Col span={12}>
                                            <FormItem {...formItemLayout} label="外联地址">
                                                    {getFieldDecorator('linkurl', {
                                                            rules: [{
                                                                    required: false,
                                                                    message: '请输入外部链接地址',
                                                            }],
                                                    })(
                                                        <Input placeholder="请输入外部链接地址"/>
                                                    )}
                                            </FormItem>
                                                    </Col>
                                                    <Col span={12}>
                                            <FormItem {...formItemLayout} label="图片上传">
                                                        <img src={this.state.imgUrl} style={{width:"40px", height:"40px", marginRight:"5px"}} alt=""/>
                                                        <Upload action='/api/?s=App.Examples_Upload.go' multiple={false}  onSuccess={this.onSuccess}>
                                                                <a>开始上传</a>
                                                        </Upload>
                                            </FormItem>
                                                    </Col>
                                                    <Col span={12}>
                                            <FormItem {...formItemLayout} label="排序等级">
                                                    {getFieldDecorator('orderNo', {
                                                            rules: [{
                                                                    required: true,
                                                                    message: '请输入排序号',
                                                            }],
                                                    })(
                                                        <Input placeholder="请输入排序号"/>
                                                    )}
                                            </FormItem>
                                                    </Col>
                                                    <Col span={12}>
                                            <FormItem {...formItemLayout} label="内容简介">
                                                    {getFieldDecorator('summary', {
                                                            rules: [{
                                                                    required: true,
                                                                    message: '请输入内容简介',
                                                            }],
                                                    })(
                                                        <Input placeholder="请输入内容简介" type="text"/>
                                                    )}
                                            </FormItem>
                                                    </Col>
                                                    <Col span={24}>
                                            <FormItem  label="新闻内容"   {...{labelCol: { span: 3 },wrapperCol: { span: 21 }}} >
                                                    <RcUeditor  onChange={this.hanldeChage} value={this.props.record.content} />
                                            </FormItem>
                                                            </Col>
                                              <Col span={24} style={{textAlign:'right'}}>
                                                      <Button type="primary" htmlType="submit">提交</Button>
                                              </Col>

                                                    </Row>
                                        </Form>

                    </div>
                );
        }
}
export default withRouter(Form.create({
        mapPropsToFields(props) {
                return {
                        fatherid: Form.createFormField({
                                value: props.record.fatherid,
                        }),
                        fatheridArr: Form.createFormField({
                                value: props.record.fatheridArr,
                        }),
                        title: Form.createFormField({
                                value: props.record.title,
                        }),
                        orderNo: Form.createFormField({
                                value: props.record.orderNo,
                        }),
                        linkurl: Form.createFormField({
                                value: props.record.linkurl,
                        }),
                        //imgurl: Form.createFormField({
                        //        value: props.record.imgurl,
                        //}),
                        summary: Form.createFormField({
                                value: props.record.summary,
                        }),
                        content: Form.createFormField({
                                value: props.record.content,
                        }),
                };
        },
})(newsDetails))